<!doctype html>

<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>Integration with dhtmlxMenu</title>

	<script src="../../codebase/dhtmlxscheduler.js?v=5.3.10" charset="utf-8"></script>
	<link rel="stylesheet" href="../../codebase/dhtmlxscheduler_material.css?v=5.3.10" type="text/css" charset="utf-8">

	<script src="https://cdn.dhtmlx.com/suite/edge/suite.js?v=5.3.10"></script>
	<link rel="stylesheet" href="https://cdn.dhtmlx.com/suite/edge/suite.css?v=5.3.10" type="text/css">
	<link rel="stylesheet" href="//cdn.materialdesignicons.com/4.1.95/css/materialdesignicons.min.css?v=5.3.10">

	<style>
		html,
		body {
			margin: 0px;
			padding: 0px;
			height: 100%;
			overflow: hidden;
		}
	</style>

	<script>
		window.addEventListener('DOMContentLoaded', function (event) {
			scheduler.config.multi_day = true;
			scheduler.config.first_hour = 8;
			scheduler.config.limit_time_select = true;

			scheduler.init('scheduler_here', new Date(2017, 7, 10), "week");
			scheduler.load("../common/events.json")

			var menu = new dhx.ContextMenu();
			menu.data.parse([{
					value: "File",
					items: [
						{ value: "New File" },
						{ value: "New window" },
						{ value: "Open File" },
						{ value: "Save File" }
					]
				},
				{
					value: "Edit",
					items: [
						{ value: "Undo" },
						{ value: "Redo" },
						{ value: "Cut" },
						{ value: "Copy" }
					]
				}
			]);

			scheduler.attachEvent("onContextMenu", function (event_id, native_event_object) {
				if (event_id) {
					menu.showAt(native_event_object);
					return false; // prevent default action and propagation
				}
				return true;
			});

			dhtmlx.message({
				text: "Right-click on event to see the menu",
				expire: -1
			});

			dhtmlx.message({
				text: "This example uses dhtmlxMenu which can be used under GPLv2 license or has to be obtained separately. <br><br> You can do this or use a third-party drop down menu widget instead.",
				expire: 1000 * 30
			});
		});
	</script>
</head>

<body>
	<div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%;'>
		<div class="dhx_cal_navline">
			<div class="dhx_cal_prev_button">&nbsp;</div>
			<div class="dhx_cal_next_button">&nbsp;</div>
			<div class="dhx_cal_today_button"></div>
			<div class="dhx_cal_date"></div>
			<div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
			<div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
			<div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
		</div>
		<div class="dhx_cal_header">
		</div>
		<div class="dhx_cal_data">
		</div>
	</div>
</body>